<template>
  <BorderBox8 style="width: 100%; height: 100%">
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
  </BorderBox8>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { BorderBox8 } from "@kjgl77/datav-vue3";
const chartRef = ref(null);
// 存储 ECharts 实例
let chartInstance = null;
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value);

    var dataSets = [
      [
        { value: 816, itemStyle: { color: "red" } },
        { value: 0, itemStyle: { color: "green" } },
        { value: 84, itemStyle: { color: "blue" } },
        { value: 0, itemStyle: { color: "yellow" } },
      ],
      [
        { value: 10, itemStyle: { color: "red" } },
        { value: 79, itemStyle: { color: "green" } },
        { value: 80, itemStyle: { color: "blue" } },
        { value: 19, itemStyle: { color: "yellow" } },
      ],
      [
        { value: 45, itemStyle: { color: "red" } },
        { value: 36, itemStyle: { color: "green" } },
        { value: 19, itemStyle: { color: "blue" } },
        { value: 40, itemStyle: { color: "yellow" } },
      ],
    ];

    var ySerial = [
      ["分切后卷", "米数短缺", "线条", "胶膜黑点"],
      ["反离型", "卷体松紧度不一", "胶带白色纸屑", "开卷静电击穿"],
      ["剥离力低", "米数短缺", "溢胶", "截面缝隙"],
    ];
    var currentDataSetIndex = 0;
    // 配置项
    const option = {
      color: ["red", "green", "blue", "yellow"],
      title: {
        text: "Monthly Customer Claim",
        left: "center",
        textStyle: {
          color: " #67e0e3",
          fontSize: "24px", // 蓝色
        },
        top: "5%",
      },
      legend: {
        // top: "15%",
        textStyle: {
          color: "#fff",
          fontSize: "18px", // 深灰色
        },
      },
      grid: {
        left: "15%",
        right: "15%",
      },
      xAxis: {
        type: "value",
        name: "金额 rmb",
        nameTextStyle: {
          color: "white",
        },
        axisLabel: {
          color: "#fff", // 红色
          fontSize: "16px",
        }, // 横轴是数值类型
        boundaryGap: [0, 0.01],
        // 留白策略，防止标签重叠
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
          },
        },
      },
      yAxis: {
        axisLabel: {
          color: "#fff", // 红色
          fontSize: "16px",
        },
        type: "category", // 纵轴是类别类型
        data: ySerial[currentDataSetIndex],

        // 类别数据
      },
      series: [
        {
          type: "bar", // 指定图表类型为柱状图
          data: dataSets[currentDataSetIndex], // 数据
          // 可以设置条形图的颜色、宽度等
          // itemStyle: {
          //   color: "#3398DB", // 颜色
          // },
        },
      ],
    };

    // 使用配置项渲染图表
    chartInstance.setOption(option);

    setInterval(function () {
      // 更新当前数据集索引，循环使用数据集
      currentDataSetIndex = (currentDataSetIndex + 1) % dataSets.length;
      // 更新图表配置项中的数据和标题
      option.series[0].data = dataSets[currentDataSetIndex];
      option.yAxis.data = ySerial[currentDataSetIndex];
      // 应用新的配置项到图表实例中
      chartInstance.setOption(option);
    }, 3000);
  }
};

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize();
};

// 组件挂载后执行初始化
onMounted(() => {
  initChart();
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener("resize", resizeChart);
});

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  chartInstance?.dispose(); // 销毁 echarts 实例
});
</script>
